工程化开发和脚手架Vue CLI

共计 515 个字符，预计需要花费 2 分钟才能阅读完成。

Vue CLI 是 Vue 官方提供的一个全局命令工具。可以快速创建一个开发 Vue 项目的标准化基础架子，集成了 webpack 配置。

使用脚手架的好处是：

• 开箱即用，零配置
• 内置 babel 等工具
• 标准化

使用步骤

全局安装脚手架：npm i -g @vue/cli

查看版本：vue --version

创建项目架子：vue create vue-demo，不喜欢用命令行界面创建项目的话，可通过图形化界面向导来创建项目：vue ui

启动项目：cd vue-demo 然后 npm run serve

修改配置

webpack 文档地址：https://webpack.js.org/configuration/dev-server/

修改 vue.config.js 文件：

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080, // 修改端口
    // 添加代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
})